/* 1. 基础body样式：放大默认字体 */
body { 
    font-size: 1.5em;
}

/* 2. 导航容器样式：背景色、边框、字体（子代选择器前的父容器样式） */
nav {
    background-color: #dcd7b8;
    border: 1px solid #beb999;
    font-family: Verdana, Arial, Helvetica, sans-serif; /* 无衬线字体 */
    font-size: 0.75em; /* 导航字体为body的75% */
    padding: 5px; /* 容器内边距 */
}

/* 3. 导航列表重置：去掉项目符号、边距内边距 */
nav ul, nav ul li {
    list-style: none; /* 关键：移除列表 bullet 点 */
    margin: 0;
    padding: 0;
}

/* 4. 列表容器样式：文字居中 */
nav ul {
    text-align: center;
    padding: 3px;
}

/* 5. 列表项样式：横向排列（关键） */
nav ul li {
    display: inline; /* 关键：让列表项水平显示（默认垂直） */
    margin-right: .75em; /* 列表项间距 */
}

/* 6. 最后一个列表项：取消右侧间距 */
nav ul li#lastnav {
    margin-right: 0;
}

/* 7. 导航链接样式：背景色、移除下划线 */
nav ul li a {
    background-color: #efeacd;
    background-repeat: no-repeat;
    text-decoration: none; /* 关键：移除链接默认下划线 */
    padding: 5px 1em; /* 内边距：上下5px，左右1em（横向撑开链接区域） */
}

/* 8. 链接悬停效果：背景色、文字色变化+过渡动画 */
nav ul li a:hover {
    background: #beb999;
    color: white;
    transition: all 0.3s; /* CSS3过渡：0.3秒完成所有样式变化 */
}